<template>
	<view>
		<view class="map-container">
			<map style="width: 100vw; height: 100vh;" :show-location='true' ref="map" id="map" :latitude="latitude"
				:longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
				<cover-view class="cover-view">
					<cover-view @click="refresh">
						<cover-image class="cover-image"
							src="https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png"></cover-image>
						<cover-view>刷新</cover-view>
					</cover-view>
					<cover-view style="margin-top: 20rpx;" @click="onControltap">
						<cover-image class="cover-image"
							src="https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"></cover-image>
						<cover-view>定位</cover-view>
					</cover-view>

				</cover-view>
			</map>
		</view>
	</view>
</template>
 
<script>
export default {
	data() {
		return {
			latitude: 22.811623, //纬度
			longitude: 108.320062, //经度
			scale: 15, //缩放级别
			marker: [
				// {
				// 	id: 0,
				// 	latitude: this.latitude, //纬度
				// 	longitude: this.longitude, //经度
				// 	iconPath: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', //显示的图标        
				// 	rotate: 0, // 旋转度数
				// 	width: 20, //宽
				// 	height: 26, //高
				// 	// title: '我在这里', //标注点名
				// 	// alpha: 0.5, //透明度
				// 	callout: { //自定义标记点上方的气泡窗口 点击有效  
				// 		content: '我的位置', //文本
				// 		color: '#ffffff', //文字颜色
				// 		fontSize: 15, //文本大小
				// 		borderRadius: 15, //边框圆角
				// 		padding: '10',
				// 		bgColor: '#3D93FD', //背景颜色
				// 		display: 'ALWAYS', //常显
				// 	}
				// },
				{
					id: 1,
					latitude: 22.811623, //纬度
					longitude: 108.320062, //经度
					iconPath: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png', //显示的图标        
					rotate: 0, // 旋转度数
					width: 20, //宽
					height: 26, //高
					// title: '我在这里', //标注点名
					// alpha: 0.5, //透明度
					callout: { //自定义标记点上方的气泡窗口 点击有效  
						content: '冬泳亭', //文本
						color: '#ffffff', //文字颜色
						fontSize: 15, //文本大小
						borderRadius: 15, //边框圆角
						padding: '10',
						bgColor: '#406390', //背景颜色
						display: 'ALWAYS', //常显
					}
				}
				,
				{
					id: 2,
					latitude: 22.81235, //纬度
					longitude: 108.31266, //经度
					iconPath: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png', //显示的图标        
					rotate: 0, // 旋转度数
					width: 20, //宽
					height: 26, //高
					// title: '我在这里', //标注点名
					// alpha: 0.5, //透明度
					callout: { //自定义标记点上方的气泡窗口 点击有效  
						content: '滑板场', //文本
						color: '#ffffff', //文字颜色
						fontSize: 15, //文本大小
						borderRadius: 15, //边框圆角
						padding: '10',
						bgColor: '#406390', //背景颜色
						display: 'ALWAYS', //常显
					}
				}

			],
			jdxx: [],//景点信息列表

		}
	},
	onReady() {

	},
	computed: {},
	onLoad() {
		this.jdxxList()
	},
	onShow() {
		this.getLocation()
	},
	methods: {
		async jdxxList() {
			let res = await this.$api.jdxxlist()
			if (res.code == 0) {
				console.log('获取景点信息成功')
				this.jdxx = res.data.list
				console.log('%c [ res.data.list ]-115', 'font-size:13px; background:pink; color:#bf2c9f;', res.data.list)
				this.jdxx.forEach(item => {
					this.marker.push({
						id: item.id,
						latitude: item.lat, //纬度
						longitude: item.lng, //经度
						iconPath: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 26, //高
						// title: '我在这里', //标注点名
						// alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: item.jingdianmingcheng, //文本
							color: '#ffffff', //文字颜色
							fontSize: 15, //文本大小
							borderRadius: 15, //边框圆角
							padding: '10',
							bgColor: '#406390', //背景颜色
							display: 'ALWAYS', //常显
						},
						originobj: item
					})
				});
				console.log('%c [ this.marker ]-117', 'font-size:13px; background:pink; color:#bf2c9f;', this.marker)
				console.log('%c [ this.jdxx ]-115', 'font-size:13px; background:pink; color:#bf2c9f;', this.jdxx)
			} else {
				uni.showToast({
					title: '获取失败',
					icon: 'none',
				})
			}
		},
		getLocation() {
			console.log('13')
			uni.getLocation({
				type: 'gcj02',
				success: res => {
					console.log('%c [ res ]-129', 'font-size:13px; background:pink; color:#bf2c9f;', res)
					this.latitude = res.latitude
					this.longitude = res.longitude
				}
			});
		},

		refresh() {
			this.getLocation()
			console.log('刷新');
			//后期这里可加入调用请求接口的方法，用来实现刷新
		},
		//定位
		onControltap() {
			this.getLocation()
			uni.createMapContext("map", this).moveToLocation({ //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
				latitude: this.latitude,
				longitude: this.longitude,
			});
			console.log('定位');
		},
		//地图点击事件
		markertap(e) {
			console.log(e.detail)
			let foundObject = this.marker.find(item => item.id == e.detail.markerId)
			uni.navigateTo({ url: `/pages/jingdianxinxi/detail?id=${foundObject.id}&lat=${foundObject.latitude}&lng=${foundObject.longitude}` })

		},
		//地图点击事件
		callouttap(e) {
			console.log(e.detail)
			let foundObject = this.marker.find(item => item.id == e.detail.markerId)
			uni.navigateTo({ url: `/pages/jingdianxinxi/detail?id=${foundObject.id}&lat=${foundObject.latitude}&lng=${foundObject.longitude}` })
		}

	}
}
</script>
 
<style scoped lang="scss">
.map-container {
	margin-top: -40rpx;
	position: relative;
	overflow: hidden;
	border-radius: 50rpx 50rpx 0 0;

	.cover-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* width: 80rpx;
			height: 160rpx; */
		padding: 42rpx 22rpx;
		color: #4F575F;
		font-weight: 400;
		background-color: #fff;
		background-size: 120rpx 120rpx;
		background-position: center center;
		position: absolute;
		top: 150rpx;
		right: 32rpx;
		border-radius: 15rpx;


	}

	.cover-image {
		display: inline-block;
		width: 50rpx;
		height: 60rpx;

	}
}
</style>